<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">{{ title }}</view>
    </view>
    <!-- 顶部介绍 -->
    <view class="detail_top">
      <view class="detail_top_left">
        <view class="detail_top_left_title">{{ detail.name }}</view>
        <view class="detail_top_left_name">{{ detail.author }}</view>
        <view
          class="detail_top_left_jianjie"
          :class="showAll ? 'detail_top_left_jianjie1' : ''"
          v-html="detail.introduce"
        >
          
        </view>
        <view class="more" v-if="showAll" @click="showAll = !showAll"
          >查看全部</view
        >
        <view class="more" v-if="!showAll" @click="showAll = !showAll"
          >收起</view
        >
      </view>
      <image :src="detail.img_url" mode="" class="detail_top_right"></image>
    </view>
    <view class="fenge"></view>
    <!-- 摘要 -->
    <view class="detail_zhaiyao">
      <view class="detail_zhaiyao_title">图书摘要</view>
      <view class="detail_zhaiyao_content" v-html=" detail.abstract"></view>
    </view>
    <view class="fenge"></view>
    <!-- 章节列表 -->
    <view class="detail_zhaiyao2">
      <view class="detail_zhaiyao_title">共创图书目录</view>
      <text-island :isInp="false" :list="list"></text-island>
    </view>

    <!-- <view class="box">
      
    </view> -->

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import textIsland from "@/components/search_co/text_island.vue"; //文心岛
export default {
  components: {
    textIsland,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      list: [],
      title: "",
      pid: "",
      detail: {},
      showAll: true,
    };
  },
  onLoad(options) {
    this.title = options.title;
    this.pid = options.pid;
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    this.getDetail();
    this.getList();
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDetail() {
      this.$http
        .gongchuangGetDe({ pid: this.pid })
        .then((res) => {
          // this.list = res.data.list.data;
          this.detail = res.data.info;
          console.log(res, "共创图书详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    getList() {
      this.$http
        .gongchuangGetList({ pid: this.pid })
        .then((res) => {
          this.list = res.data.list.data;

          console.log(this.list, "共创图书章节列表");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 0 30rpx;
  box-sizing: border-box;
}
.detail_top {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  .detail_top_left {
    flex: 1 1;
    .detail_top_left_title {
      font-size: 32rpx;
      color: #444444;
    }
    .detail_top_left_name {
      font-size: 26rpx;
      color: #888888;
      margin-top: 18rpx;
    }
    .detail_top_left_jianjie {
      font-size: 26rpx;
      color: #444444;
      line-height: 38rpx;
      margin-top: 38rpx;
    }
    .detail_top_left_jianjie1 {
      overflow: hidden;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .more {
      font-size: 26rpx;
      color: #55b877;
    }
  }
  .detail_top_right {
    width: 180rpx;
    height: 240rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin-left: 42rpx;
  }
}
.fenge {
  width: 100%;
  height: 16rpx;
  background: #f7f8fa;
}
.detail_zhaiyao {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #ffffff;
  .detail_zhaiyao_title {
    font-size: 32rpx;
    color: #444444;
  }
  .detail_zhaiyao_content {
    font-size: 28rpx;
    color: #444444;
    line-height: 46rpx;
    margin-top: 24rpx;
  }
}
.detail_zhaiyao2 {
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx 0;
  .detail_zhaiyao_title {
    font-size: 32rpx;
    color: #444444;
    padding: 0 30rpx;
  }
  .detail_zhaiyao_content {
    font-size: 28rpx;
    color: #444444;
    line-height: 46rpx;
    margin-top: 24rpx;
  }
}
</style>